<template>
  <div class="tab-panel" :id="id">
    <ares-tab-panels v-if="panelPosition === 'top'" class="tab-panel-panels" v-model="currentValue">
      <ares-tab-panel
      class="tab-panel-panels-panel"
      data-component-active
      v-for="(item, index) in data"
      :id="id + '-panel' + index"
      :label="item.label"
      :key="item.label">
        {{item}}
        <slot :name="'panel' + index"></slot>
      </ares-tab-panel>
    </ares-tab-panels>
    <ares-tab-bar
      :data="data"
      v-model="currentValue"
      :show-slider="showSlider"
      :inline="inline"
      :useTransition="useTransition"
      @click="handleClick">
    </ares-tab-bar>
    <ares-tab-panels v-if="panelPosition === 'bottom'" class="tab-panel-panels" v-model="currentValue">
      <ares-tab-panel
        class="tab-panel-panels-panel"
        data-component-active
        v-for="(item, index) in data"
        :id="id + '-panel' + index"
        :label="item.label"
        :key="item.label">
          <slot :name="'panel' + index"></slot>
      </ares-tab-panel>
    </ares-tab-panels>
  </div>
</template>

<script>
/*
扩展ares-ui的TabPanel组件
*/
export default {
  name: 'TabPanel',

  watch: {
    value: {
      handler(newValue) {
        this.currentValue = newValue;
      },
      immediate: true,
    },
  },
  props: {
    id: String,
    data: {
      default: () => [],
      type: Array,
    },
    showSlider: {
      default: false,
      type: Boolean,
    },
    inline: {
      default: false,
      type: Boolean,
    },
    useTransition: {
      default: false,
      type: Boolean,
    },
    value: {
      default: '',
      type: String,
    },
    panelPosition: {
      default: 'bottom',
      type: String,
    },
  },
  data() {
    return {
      currentValue: '',
    };
  },
  methods: {
    handleClick(currentValue) {
      this.$emit('input', currentValue);
      this.$emit('click', currentValue);
    },
    change(currentValue) {
      this.$emit('input', currentValue);
      this.$emit('change', currentValue);
    },
  },
};
</script>

<style lang="less">
.tab-panel {
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  flex-wrap: nowrap;
  -webkit-flex-warp: nowrap;
  &-panels {
    flex-grow: 1;
    -webkit-flex-grow: 1;
    flex-shrink: 1;
    -webkit-flex-shrink: 1;
  }
}
</style>

<style>
.tab-panel .ares-tab-panels-group {
  height: 100%;
}
</style>

